<template>
  <div class="bottom-nav-bar">
    <div class="nav-body">
      <div class="nav-item" :style="{color: activeItem === 0 ? '#456bfb' : ''}" @click="memberClickHandle">
        <span class="iconfont icon-chengyuan1"></span>
        <span>成员</span>
      </div>
      <!-- <div
        class="nav-item"
        v-if="number !== meetingInfo.userNumber"
        @click="goSign"
      >
        <van-icon name="location-o" />
        <span>{{ totalTime >= 0 ? '签到' : '签退' }}</span>
      </div> -->
      <div class="nav-item" :style="{color: activeItem === 1 ? '#456bfb' : ''}" @click="goMeetingHome">
        <span class="iconfont icon-shipinhuiyishebei"></span>
        <span>详情</span>
      </div>
      <div
        class="nav-item"
        :style="{color: activeItem === 2 ? '#456bfb' : ''}"
        v-if="number !== meetingInfo.userNumber"
        @click="applyHoliday"
      >
        <span class="iconfont icon-qingjiashenqing"></span>
        <span>请假</span>
      </div>
      <div
        class="nav-item"
        :style="{color: activeItem === 2 ? '#456bfb' : ''}"
        v-if="number === meetingInfo.userNumber"
        @click="holidayApproval"
      >
        <span class="iconfont icon-qingjiashenpi"></span>
        <span>请假审核</span>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, toRefs, ref, watch } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'BottomNavBar',
  props: ['meetingInfo', "boxLeft"],
  emits: ['goSign', 'memberView', 'applyHoliday', 'holidayApproval', 'goRetroactive', 'goMeetingHome'],
  setup(props, context) {
    const store = useStore()
    // const router = useRouter()

    const { meetingInfo, boxLeft } = toRefs(props)
    console.log(meetingInfo.value)

    const number = computed(() => store.getters.getUserNumber)
    // console.log(number)

    let activeItem = ref(1)

    watch(() => boxLeft.value, () => {
      switch(boxLeft.value) {
        case 0: 
          activeItem.value = 0
          break;
        case -100:
          activeItem.value = 1
          break;
        case -200: 
          activeItem.value = 2
          break;
      }
    })

    // 成员点击处理函数
    function memberClickHandle() {
      activeItem.value = 0
      context.emit('memberView')
    }

    // 签到处理函数
    function goSign() {
      context.emit('goSign')
    }

    // 请假审核处理函数
    function holidayApproval() {
      activeItem.value = 2
      context.emit('holidayApproval')
    }

    // 请假处理函数
    function applyHoliday() {
      activeItem.value = 2
      context.emit('applyHoliday')
    }

    // 会议首页
    function goMeetingHome() {
      activeItem.value  = 1
      context.emit('goMeetingHome')
    }
    
    
    return {
      // 数据
      number,
      activeItem,
      // 方法
      memberClickHandle,
      holidayApproval,
      applyHoliday,
      goSign,  
      goMeetingHome
    }
  },
}
</script>

<style lang="scss" scoped>
.bottom-nav-bar {
  width: 100%;

  .nav-body {
    box-shadow: 0 -0.09rem 0.08rem #eee,
                0 -0.1rem 0.09rem #eee;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .nav-item {
      display: flex;
      flex-direction: column;
      font-size: 1.5rem;
      text-align: center;
      // transition: all 1s;

      &:active {
        color: var(--blue-color1);
      }

      span {
        margin-top: 0.5rem;
        font-size: 1.2rem;
      }
      .iconfont {
        font-size: 1.8rem;
      }
    }
  }
}
</style>